<template>
	<view class="privacy-container" v-if="isShow" @touchmove.stop.prevent="moveHandle">
		<u-popup v-model="isShow" mode="center" border-radius="16">
			<view class="privacy-box">
				<view class="ttl">{{ title }}</view>
				<view class="info">
					<view class="text">
						{{ desc1 }}
						<text style="color: #314ad9" @click="toOpenPrivacyContract">{{ name }}</text>
					</view>
					<view class="tip">{{ desc2 }}</view>
				</view>

				<view class="privacy-btm">
					<button class="privacy-btn" @click="close">拒绝</button>
					<button class="privacy-btn" type="warn" id="agree-btn" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: 'uni-privacy',
	props: {
		title: {
			type: String,
			default: '用户隐私保护提示'
		},
		initiative: {
			type: Boolean,
			default: false
		},
		isCover: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			isShow: false,
			desc1: '您使用本产品服务前应当阅读井同意',
			name: '《用户隐私保护指引》',
			desc2: '当您点击同意并开始时用产品服务时，即表示你已理解并同息该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法使用相应服务。'
		};
	},
	created() {
		if (wx.onNeedPrivacyAuthorization) {
			// wx.getPrivacySetting 不参与逻辑，判断用户授权情况。可以注释
			wx.getPrivacySetting({
				success: (res) => {
					console.log('getPrivacySetting', res);
					this.name = res.privacyContractName;
					if (this.initiative) {
						this.isShow = res.needAuthorization;
						if (this.isShow) this.isCover && uni.hideTabBar();
					}
				}
			});

			wx.onNeedPrivacyAuthorization((resolve) => {
				this.resolvePrivacyAuthorization = resolve;
				this.isShow = true;
				this.isCover && uni.hideTabBar();
			});

			wx.requirePrivacyAuthorize({
				success: (res) => {
					// 用户同意授权
					console.log('requirePrivacyAuthorize', res);
				},
				fail: () => {}, // 用户拒绝授权
				complete: () => {}
			});
		}
	},
	methods: {
		moveHandle() {},
		handleAgreePrivacyAuthorization() {
			// 用户点击同意按钮后
			if (this.resolvePrivacyAuthorization) {
				this.resolvePrivacyAuthorization({
					buttonId: 'agree-btn',
					event: 'agree'
				});
			}
			this.close();
		},
		toOpenPrivacyContract() {
			wx.openPrivacyContract({
				success: () => {},
				fail: () => {},
				complete: () => {}
			});
		},
		close() {
			this.isShow = false;
			this.isCover && uni.showTabBar();
		}
	}
};
</script>

<style lang="scss">
.privacy-box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 600rpx;
	min-width: 280px;
	min-height: 590rpx;

	.ttl {
		padding: 40rpx 30rpx 30rpx;
		font-size: 18px;
		font-weight: bold;
		color: #333;
		line-height: 50rpx;
		text-align: center;
		background-color: #f6f7fb;
	}

	.info {
		padding: 20rpx 30rpx;
		font-size: 17px;
		color: #333;
		line-height: 48rpx;

		text {
			margin-right: 42rpx;
			color: #999;
		}
	}

	.tip {
		font-size: 12px;
	}

	.person,
	.time,
	.text {
		margin-bottom: 20rpx;
	}

	.btm {
		padding: 24rpx;
		font-size: 17px;
		color: #3396fb;
		line-height: 48rpx;
		text-align: center;
		border-top: 2rpx solid #e9e9e9;
	}
}

.privacy-btm {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 30rpx 40rpx;

	.privacy-btn {
		margin: 0;
		width: 48%;
		font-size: 16px;
		// line-height: 88rpx;
	}
}
</style>
